<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>文章</title>-->
<!--    <link rel="stylesheet" href="css/index.css">-->
<!--    <link rel="stylesheet" href="css/article.css">-->
<!--</head>-->
<!--<body>-->
<!--<div class="head">-->
<!--    <div class="logo">-->
<!--        <a href="index.html"><img src="imgs/index/ESDC_logo.jpg" alt=""></a>-->
<!--        <div class="logo_name">-->
<!--            <h1>&nbsp;工&nbsp;程&nbsp;软&nbsp;件&nbsp;研&nbsp;发&nbsp;中&nbsp;心</h1>-->
<!--            <p>&nbsp;Engineering Software Development Centre</p>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div class="top_list">-->
<!--        <ul>-->
<!--            <li><a href="visitor.html">访客</a></li>-->
<!--            <li><a href="">邮箱</a></li>-->
<!--            <li class="dropdown"><a href="">联系我们</a>-->
<!--                <div class="dropdown-content">-->
<!--                    <p>电话：123-456-7890</p>-->
<!--                    <p>邮箱：contact@example.com</p>-->
<!--                    <p>地址：北京市朝阳区</p>-->
<!--                </div>-->
<!--            </li>-->
<!--            <li><a href="">登录</a><span>/</span><a href="">注册</a></li>-->
<!--        </ul>-->
<!--    </div>-->
<!--    <div class="bottom_nav">-->
<!--        <ul>-->
<!--            <li><a href="aboutUs.html">关于我们</a></li>-->
<!--            <li><a href="">研究成果</a></li>-->
<!--            <li><a href="newsEvents.html">新闻活动</a></li>-->
<!--            <li><a href="">合作交流</a></li>-->
<!--        </ul>-->
<!--    </div>-->
<!--    <div class="test"></div>-->
<!--</div>-->
<!--<div class="content">-->
<!--    <div class="header">-->
<!--        <img src="imgs/article/header.jpg" alt="">-->
<!--        &lt;!&ndash;            <span >狼&nbsp;行&nbsp;千&nbsp;里&nbsp;吃&nbsp;肉</span>&ndash;&gt;-->
<!--    </div>-->
<!--    <div class="text">-->

<!--        <div class="title"><h1>文章标题</h1></div>-->
<!--        <div class="type">-->
<!--            <div class="name">XXX</div>-->
<!--            <div class="publishDate">XXXX-XX-XX</div>-->
<!--        </div>-->
<!--        <div class="text_body">-->
<!--            <p>-->
<!--                随着科技的不断进步和教育需求的日益增长，我市重点中学——阳光中学的实验室近日完成了一次全面的升级改造，旨在为学生提供一个更加先进、安全的实验环境，以激发学生的科学兴趣和创新能力。-->

<!--                据了解，此次实验室升级项目包括了最新的实验设备购置、实验室环境优化以及安全系统的升级。学校投入了大量资金，引进了一批国际先进的实验仪器，如高精度显微镜、数字示波器和化学分析仪等，这些设备将极大地提高实验的精确度和效率。-->

<!--                实验室环境方面，学校对实验室进行了重新布局，增加了通风设施和紧急处理设备，确保了实验室的安全性和舒适性。此外，实验室的墙面和地面也进行了特殊处理，以适应不同实验的需求。-->

<!--                安全系统升级是此次改造的重点之一。学校特别聘请了专业的安全顾问团队，对实验室的安全规程进行了全面的审查和更新。同时，学校还为实验室配备了智能监控系统，能够实时监控实验室内的环境变化，确保实验过程中的安全。-->

<!--                阳光中学校长李明表示：“我们希望通过这次实验室的升级，能够为学生提供一个更加接近真实科研环境的学习场所。这不仅能提高学生的实验技能，还能激发他们对科学探索的热情。”-->

<!--                此次实验室升级改造得到了教育部门和家长的广泛支持。教育部门负责人表示，实验室的升级改造是提高教育质量的重要一步，有助于培养学生的实践能力和创新精神。家长们也对学校的这一举措表示赞赏，认为这将为孩子的未来发展打下坚实的基础。-->

<!--                阳光中学的实验室升级改造预计将在本月底完成，届时将正式对师生开放。学校还计划定期邀请科研机构的专家来校进行讲座和指导，进一步丰富学生的科研体验。-->

<!--                结语：-->

<!--                阳光中学实验室的升级改造，不仅是学校硬件设施的一次飞跃，更是对教育质量提升的一次积极探索。我们期待这次升级能够-->
<!--            </p>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->
<!--<div class="footer">-->
<!--</div>-->
<!--</body>-->
<!--</html>-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文章</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/article.css">
    <style>
    </style>
</head>
<body>
<div class="head">
    <div class="logo">
        <a href="index.html"><img src="imgs/index/ESDC_logo.jpg" alt=""></a>
        <div class="logo_name">
            <h1>&nbsp;工&nbsp;程&nbsp;软&nbsp;件&nbsp;研&nbsp;发&nbsp;中&nbsp;心</h1>
            <p>&nbsp;Engineering Software Development Centre</p>
        </div>
    </div>
    <div class="top_list">
        <ul>
            <li><a href="visitor.html">访客</a></li>
<!--            <li><a href="">邮箱</a></li>-->
            <li class="dropdown"><a href="">联系我们</a>
                <div class="dropdown-content">
                    <p>电话：123-456-7890</p>
                    <p>邮箱：contact@example.com</p>
                    <p>地址：北京市朝阳区</p>
                </div>
            </li>
            <li id="userProfileBtn" style="display: none;">
                <a href="javascript:void(0);" onclick="showPersonalBox()">用户名</a>
            </li>
            <li id="loginRegisterBtn">
                <a href="javascript:void(0);" onclick="showLoginBox()">登录</a><span>/</span><a href="javascript:void(0);" onclick="showRegistrationBox()">注册</a>
            </li>
        </ul>
    </div>
    <div class="bottom_nav">
        <ul>
            <li><a href="aboutUs.html">关于我们</a></li>
            <li><a href="researchFindings.html">研究成果</a></li>
            <li><a href="newsEvents.html">新闻活动</a></li>
            <li><a href="cooperation.html">合作交流</a></li>
        </ul>
    </div>
    <div class="test"></div>
</div>
<div class="myCanvas" id="myCanvas">
    <canvas></canvas>
</div>
<div class="content">
    <div class="header">
<!--        <img src="imgs/article/header.jpg" alt="">-->
    </div>
    <div class="text">
        <div class="title"><h1 id="articleTitle">文章标题</h1></div>
        <div class="type">
            <div class="name" id="authorName">作者名</div>
            <div class="publishDate" id="publishDate">发布日期</div>
        </div>
        <div class="text_body">
            <p id="articleContent">
<!--                文章内容-->
            </p>
        </div>
    </div>
    <div class="footer">
        <div class="footer_image">
            <img src="imgs/footer/ESDC_logo.jpg" alt="">
        </div>
        <div class="words">
            <p>版权:江西师范大学(Jiangxi Normal University)ICP备案编号：赣B2-20050166号-1</p>
            <p>学校地址：［瑶湖校区］江西省南昌市紫阳大道99号邮政编码：330022</p>
            <p>［青山湖校区］江西省南昌市北京西路437号邮政编码：330027</p>
        </div>
        <div class="QRcode">
            <img src="imgs/footer/QRcode1.png">
            <img src="imgs/footer/QRcode2.png">
        </div>
    </div>
</div>
<!-- 弹窗 -->
<div id="loginBox" class="login-box" style="display: none; position: fixed; z-index: 1000; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: transparent; padding: 0; width: 800px; height: 68%; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
    <iframe id="loginFrame" src="" frameborder="0" style="width: 100%; height: 100%; border: none;"></iframe>
</div>
<script src="js/window.js"></script>
<script>
    // 页面加载完成后检查登录状态并更新界面
    document.addEventListener('DOMContentLoaded', function() {
        // 假设有一个函数 checkLoginStatus() 来检查登录状态
        // 如果用户已登录，更新界面
        // checkLoginStatus();
    });
</script>
<script>
    window.onload = function() {
        var urlParams = new URLSearchParams(window.location.search);
        var articleId = urlParams.get('articleId');
        if (articleId) {
            fetchArticleByTitle(articleId);
        }
    };

    function fetchArticleByTitle(articleId) {
        axios.get(`http://localhost:8080/javaweb_project/articles/selectByArticleTitle?articleId=${articleId}`)
            .then(function (response) {
                const article = response.data;
                document.getElementById('articleTitle').textContent = article.title;
                document.getElementById('articleContent').textContent = article.content;
                document.getElementById('authorName').textContent = article.author;
                document.getElementById('publishDate').textContent = article.publishDate.split(' ')[0]; // 格式化日期
            })
            .catch(function (error) {
                console.log(error);
            });
    }
</script>
<script>
    (function(){

        window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame;

        var canvas = document.querySelector("canvas");
        canvas.width = window.innerWidth
        canvas.height = window.innerHeight;

        var ctx = canvas.getContext("2d");

        ctx.globalCompositeOperation = "saturation"; //合成方法

        //stats.js
//   var stats = new Stats();
// document.body.appendChild( stats.domElement );

        var particles = [];

        var pIndex = 0;
        var frameId;


        /*             */
        /*Particle */
        /*            */

        function Particle(color,x,y,circleSize,radius){
            this.color = color;
            this.x = 0;
            this.y = 0;
            this.posX = x;
            this.posY = y;

            this.circleSize = circleSize;

            this.direction = getRandom(-1,1);

            this.wave;
            this.amplitude = getRandom(-50,50);
            this.waveSpeed = getRandom(2,3);
            this.speed = getRandom(1,2);

            particles[pIndex] = this;
            this.id = pIndex;
            pIndex++;

            this.radius = radius;
            this.count = 0;
        };

        Particle.prototype.draw = function(){
            this.radius += Math.sin(this.count*0.1);

            this.wave = Math.sin( Math.PI/180*this.count*this.waveSpeed * this.direction ) * this.amplitude;

            this.x = Math.sin( Math.PI/180*this.count * this.speed * this.direction ) * this.circleSize - this.radius/2 + this.wave + this.posX;
            this.y = Math.cos( Math.PI/180*this.count * this.speed * this.direction) * this.circleSize - this.radius/2 + this.wave + this.posY;

            this.count += 1;

            var colA = hex2rgba(this.color,1);
            var colB = hex2rgba(this.color,0);

            var grd = ctx.createRadialGradient( this.x+this.radius/2,  this.y+this.radius/2,  0,  this.x+this.radius/2,  this.y+this.radius/2, this.radius/2);
            grd.addColorStop(0, colA);
            grd.addColorStop(1,  colB);

            ctx.fillStyle = grd;
            ctx.beginPath();
            ctx.fillRect( this.x, this.y, this.radius, this.radius );
            ctx.closePath();
            ctx.fill();

        }



        var colorTips = [
            '#151313',
            '#0b0a0a',
            '#929392',
            '#e5ebec',
            '#171516'
        ]

        //function Particle(color,x,y,circleSize,radius){
        for(var i = 0; i < 30; i++){
            var r = Math.floor( getRandom(0,colorTips.length) );
            new Particle( colorTips[r], getRandom(0,canvas.width/2), getRandom(0,canvas.height), getRandom(-canvas.width,canvas.width),getRandom(500,1000));
        }



        //function Particle(circleSize,radius,x,y,direction,speed,amplitude,waveSpeed){

        function loop(){
            ctx.clearRect(0,0, canvas.width, canvas.height);  //画面更新

            //Particle描画
            for(var i in particles){
                particles[i].draw();
            }

            frameId = requestAnimationFrame(loop);
            if(frameId % 2 == 0) { return; }//60fps
            stats.update();
        }

        loop();


        window.addEventListener("resize", function(){
            // canvas.width = window.innerWidth;
            // canvas.height = window.innerHeight;
            // x = canvas.width / 2;
            // y = canvas.height / 2;
        });


        function getRandom(min, max) {
            return Math.random() * (max - min) + min;
        }


        function hex2rgba (hex, alpha = 1) {


            let r = hex.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i)
            let c = null
            if (r) {
                c = r.slice(1,4).map(function(x) { return parseInt(x, 16) })
            }

            r = hex.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i)
            if (r) {
                c = r.slice(1,4).map(function(x) { return 0x11 * parseInt(x, 16) })
            }

            if (!c) {
                return null
            }
            return `rgba(${c[0]}, ${c[1]}, ${c[2]}, ${alpha})`
        }


    })();
</script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        checkLoginStatus(); // 检查登录状态并更新界面
    });

    function checkLoginStatus() {
        const username = localStorage.getItem('username');
        if (username) {
            updateUserInfo(username);
        } else {
            // 如果没有用户名，则显示登录注册按钮
            const loginRegisterBtn = document.getElementById('loginRegisterBtn');
            const userProfileBtn = document.getElementById('userProfileBtn');
            loginRegisterBtn.style.display = 'inline';
            userProfileBtn.style.display = 'none';
        }
    }

    function updateUserInfo(username) {
        const userProfileBtn = document.getElementById('userProfileBtn');
        const loginRegisterBtn = document.getElementById('loginRegisterBtn');

        if (userProfileBtn && loginRegisterBtn) {
            userProfileBtn.querySelector('a').innerText = username;
            userProfileBtn.style.display = 'inline'; // 显示用户名按钮,inline保证不被换行
            loginRegisterBtn.style.display = 'none'; // 隐藏登录注册按钮
        } else {
            console.error('User profile or login register button not found');
        }
    }
</script>
</body>
</html>